<template>
	<div class="content">
		<el-steps :active="2" align-center>
		  <el-step title="查询信息" description="这是一段很长很长很长的描述性文字"></el-step>
		  <el-step title="制作印章" description="这是一段很长很长很长的描述性文字"></el-step>
		  <el-step title="上传文件" description="这是一段很长很长很长的描述性文字"></el-step>
		  <el-step title="签署文件" description="这是一段很长很长很长的描述性文字"></el-step>
		</el-steps>
		
	
		<div class="box">
			<div class="crop">
			  <vueCropper
				ref="cropper"
				:img="option.img"
				:autoCrop="option.autoCrop"
				:fixedNumber="option.fixedNumber"
				:fixedBox="option.fixedBox"
				:canMoveBox="option.canMoveBox"
				:outputType="option.outputType"
				>
			  </vueCropper>
			</div>
			<div class="btn">
			  <el-button type="primary" @click="getCropData()">截图</el-button>
			  <el-button
				type="primary"
				icon="el-icon-refresh-left"
				@click="rotateLeft()"></el-button>
			  <el-button
				type="primary"
				icon="el-icon-refresh-right"
				@click="rotateRight()"></el-button>
			  <el-button type="primary" @click="refresh()">重置</el-button>
			  <label class="file-btn"  for="uploads">选择图片</label>
			   <input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)" >
			</div>
			<img class="pic" :src="imgUrl" alt="" />
		</div>
		
	</div>
</template>

<script>
	import { VueCropper } from "vue-cropper";
	export default {
	components: {
	    VueCropper,
	  },
	  data() {
	    return {
			option: {
		         img: "https://sucai.suoluomei.cn/sucai_zs/images/20201009165025-bg.png", // 裁剪图片的地址
		         autoCrop: true, //是否默认生成截图框
		         fixedBox: true, //固定截图框大小 不允许改变
				 fixedNumber: [150,160],
				 outputType: 'png', // 裁剪生成图片的格式
				 canMoveBox: false, // 截图框能否拖动
		       },
		       imgUrl: "",
	    }
	  },
	  methods:{
		// 左旋转
		    rotateLeft() {
		      this.$refs.cropper.rotateLeft();
		    },
		    // 右旋转
		    rotateRight() {
		      this.$refs.cropper.rotateRight();
		    },
		    // 重置
		    refresh() {
		      this.$refs.cropper.refresh();
		    },
		    // 生成blob图片
		    getCropData() {
		      this.$refs.cropper.getCropData((data) => {
		        this.imgUrl = data;
		      });
		    },
			//选择本地图片
		  uploadImg(e, num) { 
			console.log('uploadImg');
			var _this = this;
			//上传图片 
			var file = e.target.files[0] 
			_this.fileName = file.name;
			if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) { 
			  alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种') 
			  return false 
			} 
			var reader = new FileReader(); 
			reader.onload =(e) => { 
			  let data; 
			  if (typeof e.target.result === 'object') { 
				// 把Array Buffer转化为blob 如果是base64不需要 
				data = window.URL.createObjectURL(new Blob([e.target.result])) 
			  } 
			  else { 
				data = e.target.result 
			  }
			  if (num === 1) { 
				_this.option.img = data 
			  } else if (num === 2) { 
				_this.example2.img = data 
			  } 
			} 
			// 转化为base64 
			// reader.readAsDataURL(file) 
			// 转化为blob 
			reader.readAsArrayBuffer(file);
			
		  },
	  }
	}
</script>

<style scoped>
	.content{
		padding: 20px;
	}
	
	.box {
	  margin: 30px auto 0;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	}
	.crop,
	.pic {
	  width: 300px;
	  height: 300px;
	  object-fit: cover;
	}
	.btn {
	  display: flex;
	  flex-direction: column;
	}
	.btn button {
	  margin: 10px 0;
	}
	.file-btn{
		font-size: 14px;background-color: #409EFF;border-radius: 4px;color: white;display:inline-block;width: 70px;height: 40px;padding: 0;text-align: center;line-height: 40px;
	}
</style>
